<template>
	<!-- 城市合伙人入驻 -->
	<view class="page">
		<view class="lin-top"></view>
		<view class="form-data">
			<view class="form-item line">
				<view class="item-name">
					<view class="item-icon">*</view>
					<text class="item-title">姓名</text>
				</view>
				<input type="text" placeholder="请输入真实姓名" class="item-input" v-model="formData.name" />
			</view>
			<view class="form-item line">
				<view class="item-name">
					<view class="item-icon">*</view>
					<text class="item-title">手机号</text>
				</view>
				<input type="text" placeholder="请输入手机号" class="item-input" v-model="formData.phone" />
			</view>
			<view class="form-item line">
				<view class="item-name">
					<view class="item-icon"></view>
					<text class="item-title">邮箱</text>
				</view>
				<input type="text" placeholder="请输入邮箱" class="item-input" v-model="formData.email" />
			</view>
			<view class="form-item line">
				<view class="item-name">
					<view class="item-icon"></view>
					<text class="item-title">地址</text>
				</view>
				<input type="text" placeholder="请输入地址" class="item-input" v-model="formData.address" />
			</view>
			<view class="form-item line">
				<view class="item-name">
					<view class="item-icon"></view>
					<text class="item-title">备注</text>
				</view>
				<input type="text" placeholder="其他备注" class="item-input" v-model="formData.remark" />
			</view>
		</view>


		<view class="sue-btn">
			<button type="default" class="color-base-bg" @click="submit()" v-if="!is_updata">确认入驻</button>
			<button type="default" class="color-base-bg" @click="submit(1)" v-if="is_updata">确认修改</button>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				token: '',
				formData: {
					name: '',
					phone: '',
					email: '',
					address: '',
					remark: '',

				},
				is_updata: false
			}
		},
		onLoad(option) {
			// 重新修改
			if (option.name) {
				this.formData.name = option.name
				this.formData.phone = option.phone
				this.formData.email = option.email
				this.formData.address = option.address
				this.formData.remark = option.remark
				this.is_updata = true
			}
			console.log(this.formData)
		},
		methods: {
			checkFormField(field, msg) {
				if (!this.formData[field]) {
					uni.showToast({
						icon: 'none',
						title: msg
					})
					return false;
				}
				return true;
			},
			submit(e = 0) {

				if (this.checkFormField('name', '请输入姓名') === false) return;
				if (this.checkFormField('phone', '请输入手机号码') === false) return;
				if (this.formData['phone'].length !== 11 || this.formData['phone'].substr(0, 1) != 1) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号码'
					})
					return;
				}

				this.$api.sendRequest({
					url: '/api/member/applyPartner',
					data: this.formData,
					success: res => {
						console.log(res)
						if (res.code == 0) {
							uni.showToast({
								title: '申请成功',
							})
							setTimeout(() => {
								uni.redirectTo({
									url: 'city-partner'
								})
							}, 1000)
						} else {
							uni.showModal({
								title: '提示',
								content: res.message,
								showCancel: false,
							})
						}
					}
				});
			}


		}
	}
</script>

<style lang="scss">
	.page {
		.lin-top {
			width: 100%;
			height: 20rpx;
			background-color: #F8F8F8;
		}

		.form-data {
			padding: 0 20rpx;
			background-color: white;

			.form-item {
				height: 100rpx;
				padding: 0 20rpx;
				display: flex;
				align-items: center;


				.item-name {
					display: flex;
					align-items: center;
					width: 35%;

					.item-icon {
						height: 100rpx;
						line-height: 100rpx;
						padding-top: 8rpx;
						width: 20rpx;
						color: #FF4544;
						font-size: 28rpx;
						margin-right: 4rpx;
					}

					.item-title {
						font-size: 28rpx;
					}
				}

				.item-input {
					width: 65%;
					color: $color-title;
					font-size: 28rpx;
				}

				.address-width {
					width: 70%;
				}
			}

			.line {
				border-bottom: 2rpx solid #EEEEEE;
			}

			.form-img-box {
				height: 303rpx;
				align-items: flex-start;

				.form-img {
					border: 2rpx solid #CCCCCC;
					color: #CCCCCC;
					height: 120rpx;
					margin-top: 40rpx;
					width: 120rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: $border-radius;

					.store_img {
						width: 120rpx;
						height: 120rpx;
						border-radius: $border-radius;
					}

					text {
						font-weight: bold;
						font-size: 50rpx;
					}
				}

				.active {
					border-radius: 0;

				}
			}
		}

		.sue-btn {
			position: fixed;
			bottom: 30rpx;
			left: 0;
			width: 100%;
			padding-bottom: 10rpx;
			padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(10rpx + env(safe-area-inset-bottom));

			button {
				color: white;
				height: 94rpx;
				border-radius: 60rpx;
				line-height: 94rpx;
			}
		}
	}
</style>
<style scoped>

</style>
